
@import '../../styles/default.scss';

.order-detail-page {
  height: 100vh;
  position: relative;
  background-color: $color-bg;
  overflow: hidden;
  .detail-content{
    height: calc(100vh - 80PX);
    padding: 16px;
    margin-bottom: 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .top-content{
    min-height: 80PX;
    // padding: 20px 30px;
    background-color: #fff;
    margin-bottom: 30px;
    border-radius: 8px;
    &-cancel{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px;
      font-size: $font-15;
      color: $font-color-base;
      border-bottom: 1px solid $tag-bg;
      &-subtext{
        color: $font-color-grey;
      }
      &-time{
        font-size: $font-10;
        color: $font-color-light;
      }
    }
    &-title{
      height: 60px;
      padding: 0 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: $font-15;
      color: $font-color-dark;
      border-bottom: 1px solid $tag-bg;
    }
  }

  .log-content{
    padding: 20px 30px;
    background-color: #fff;
    margin-bottom: 30px;
    font-size: $font-15;
    .log-steps{
      padding: 30px;
      position: relative;
    }
  
  }

  .operate-content{
    height: 60PX;
    display: flex;
    flex: 1;
    justify-content: space-around;
    align-items: center;
    border-radius: 6px;
    font-size: $font-15;
    background-color: $color-white;
    margin-bottom: 20px;
    &-item{
      height: 100%;
      display: flex;
      align-items: center;
      color: $font-color-light;
      &-img{
        @include wh(25PX, 25PX);
        margin-right: 10px;
      }
    }
  }

  .info-content{
    padding: 20px;
    background-color: $color-white;
    &-list{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      font-size: $font-15;
      color: $font-color-light;
      div{
        flex-basis: calc(50% - 20px);
        height: 50px;
        line-height: 50px;
        text-align: left;
        margin: 10px;
        margin-left: 0;
      }
      .info-content-list-row{
        flex-basis: 100%;
      }
    }
  }

  .order-detail-bottom{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 30px;
  }

}

.cancel-warn{
  padding: 18px;
  color: $color-main;
  background-color: #EEE;
  font-size: $font-15;
  border-radius: 6px;
}
.cancel-title{
  font-size: $font-15;
  color: $font-color-grey;
  margin: 10px 0;
}
.cancel-reason-list{
  width: 100%;
  textarea{
    font-size: $font-15;
  }
}
.modal-content-btn{
  background-color: #ff8124;
  border: none;
}